<template>
  <div @click="ChangeLink(props)">
    <orhon-card class="CardTop">
      <template v-slot:content>
        <div class="Container">
          <icon-font
            :style="{fontSize:props.fontSize?props.fontSize:30+'px',color:props.color?props.color:''}"
            :type="props.icon"
          />
          <div
            class="rightCard"
            :style="{fontSize:props.fontSize,lineHeight:props.height+'px'}"
          >{{props.title}}</div>
          <div class="clear"></div>
        </div>
      </template>
    </orhon-card>
  </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop } from "vue-property-decorator";
import { namespace } from "vuex-class";
import OrhonCard from "../Card.vue";
import { menuFilter } from "../../utils/index";

const module = namespace("tabs");
const sessionStorage = namespace("sessionStorage");
const permission = namespace("permission");
const authentication = namespace("authentication");
const BusinessRoutes = namespace("myBusiness");

@Component({
  components: {
    OrhonCard
  }
})
export default class NewCard extends Vue {
  @Prop({ required: true }) props!: any;
  @module.Mutation("RESET_PANES") resetPanes;
  @sessionStorage.Mutation("setItemRoute") sessionStorage;
  @permission.Getter("getRoutes") getRoutes;
  @authentication.Getter("getUserInfo") getUserInfo;
  @BusinessRoutes.Getter("getBusinessRoutes") getBusinessRoutes;
  @BusinessRoutes.Mutation("setRouteskey") setRouteskey;

  async ChangeLink(val: any) {
    // let a = "------- 拥有路由(本地) -------";
    // console.log(`%c ${a}`, "color:green;font-size:25px");
    // console.log(this.getRoutes);
    // let b = "------- 用户拥有路由 -------";
    // console.log(`%c ${b}`, "color:blue;font-size:25px");
    // console.log(this.getUserInfo.routes);
    const data = this.getUserInfo.routes;
    let status: any[] = [];
    let key: string = "";
    let child: any = "";
    await menuFilter(
      val,
      this.getBusinessRoutes,
      data => {
        status = data;
      },
      (val, route) => {
        key = val;
        child = route;
      }
    );
    if (status.length > 0) {
      this.sessionStorage(status);
      const result = {
        routes: child,
        defaultSelect: val.routes.key,
        defaultOpen: key
      };
      this.setRouteskey(result);
      this.$router.push({
        name: child.name
      });
    } else {
      this.$notification.open({
        message: "提示",
        description: "没有权限哦"
        // icon:<a-icon type="smile" style="color: #108ee9" />,
      });
    }
  }

  created() {
    this.resetPanes([]);
  }
}
</script>
<style lang="less" scoped>
.Container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rightCard {
  float: right;
  font-size: 20px;
  margin-left: 10px;
}

.clear {
  clear: both;
}

.CardTop {
  // width: 230px;
  float: left;
  margin-top: 20px;
  margin-right: 20px;
  box-shadow: 0px 1px 20px #cff5ef;
}
</style>
<style lang="less">
.CardTop {
  .ant-card-bordered {
    border: none !important;
  }
}
</style>
